<template>
    <div class="blockView">
        <Select type="text" transfer ref="select" filterable allow-create v-if="show" v-model="inputValue" @blur.native.capture="onblur" @on-create="handleCreate">
            <Option v-for="(item, index) in SelectValueList" :value="item.value" :key="item.value + '' + index">{{ item.name }}</Option>
        </Select>
        <div v-else class="blockView" @click="onShow">{{ showValue }}</div>
    </div>
</template>

<script>
import Bus from '@/libs/bus.js'

export default {
    props: ['value', 'selectList', 'row'],
    data() {
        return {
            show: false,
            inputValue: this.value,
            SelectValueList: JSON.parse(JSON.stringify(this.selectList))
        }
    },
    mounted() {
        // this.inputValue = this.value;
    },
    computed: {
        showValue: {
            get: function () {
                var _value = null
                for (let i = 0; i < this.SelectValueList.length; i++) {
                    const element = this.SelectValueList[i]
                    if (element.value === this.inputValue) {
                        _value = element.name
                    }
                }
                return _value
            }
        }
    },
    watch: {
        inputValue(val) {
            this.$emit('input', val)

            Bus.$emit('input', {
                value: val,
                index: this.row
            })
        }
    },
    methods: {
        handleCreate(val) {
            this.SelectValueList.push({
                value: val,
                name: val
            })
        },
        onShow() {
            this.show = true
        },
        onblur() {
            this.$nextTick(() => {
                this.show = false
            })
        }
    }
}
</script>

<style scoped>
.blockView {
    width: 100%;
    height: 32rem;
}
.blockView .blockView {
    line-height: 32rem;
}
</style>